$moderateCardTimestampColor: var(--v2-colors-mono-100);
$moderateCardEditedColor: var(--v2-colors-mono-100);
$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
$moderateCardDecisionColor: var(--v2-colors-mono-500);
$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
$moderateCardLinkTextColor: var(--v2-colors-teal-700);

.topBar {
  position: relative;
  margin-bottom: var(--v2-spacing-1);
}

.topBarMini {
  margin-bottom: var(--v2-spacing-4);
}

.usernameButton {
  margin-right: var(--mini-unit);
  padding: var(--spacing-1);
  margin-left: calc(-1 * var(--v2-spacing-1));

  line-height: var(--v2-line-height-reset);

  &:hover {
    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--v2-round-corners);
    border-style: none;
  }

  &:active {
    background-color: $moderateCardUsernameBackgroundHover;
    border-radius: var(--v2-round-corners);
    border-style: none;
  }
}

.inReplyTo {
}

.footer {
  margin-top: calc(2 * var(--mini-unit));
}

.mainContainer {
  flex-grow: 1;

  margin-right: calc(2 * var(--v2-spacing-5));
}

.contentArea {
  position: relative;
}

.content {
  min-height: 3em;
}

.aside {
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  padding-top: 25px;
}

.asideWithoutReplyTo {
  padding-top: 10px;
}

.asideMini {
  /*
    No reply to field, so we align below the fattest element
    which is the feature button.
  */
  padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
}

.asideMiniWithReplyTo {
  /*
    We have reply to field, so we align below the fattest
    element plus the reply to field.
  */
  padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
}

.decision {
  color: $moderateCardDecisionColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-bold);
  font-family: var(--v2-font-family-primary);
  line-height: 1.14;
  text-transform: uppercase;
}

.separator {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--v2-spacing-5));
  bottom: 0;
  width: 2px;
}

.ruledSeparator {
  border-right: 1px solid var(--v2-colors-grey-400);
}

.root {
  transition: background 100ms, box-shadow 100ms;
}

.root:focus {
  outline: none;
}

.dangling {
  background-color: var(--v2-palette-grey-lightest);
  box-shadow: none;
}

.link {
  font-size: var(--v2-font-size-1);
  font-weight: var(--v2-font-weight-primary-semi-bold);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-reset);
  color: $moderateCardLinkTextColor;
  text-transform: uppercase;
}

.viewContext {
  padding-bottom: var(--v2-spacing-1);
}

.storyLabel {
  color: var(--v2-palette-grey-main);
  font-size: var(--v2-font-size-1);
  font-weight: var(--v2-font-weight-primary-semi-bold);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-reset);
  margin-bottom: var(--v2-spacing-1);
  text-transform: uppercase;
}

.storyTitle {
  color: $moderateCardStoryTitleColor;
}

.commentOn {
  font-size: var(--v2-font-size-2);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-reset);
  margin-bottom: var(--v2-spacing-1);
}

.siteName {
  font-weight: var(--v2-font-weight-primary-regular);
}

.storyTitle {
  font-weight: var(--v2-font-weight-primary-semi-bold);
}

.borderless {
  border-width: 0px;
  box-shadow: none;
  padding: var(--v2-spacing-2) 0;
}

.miniButton {
  width: 40px;
  height: 40px;
}

.deleted {
  background: var(--v2-palette-grey-lightest);
}

.timestamp {
  color: $moderateCardTimestampColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
  line-height: var(--v2-line-height-reset);
}

.edited {
  color: $moderateCardEditedColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
  line-height: var(--v2-line-height-reset);
  padding-left: var(--v2-spacing-2);
}

.selected {
  box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.25);
}

.authorStatus {
  padding-right: var(--spacing-2);
  color: $moderateCardAuthorStatusColor;
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-1);
  line-height: var(--v2-line-height-reset);
  padding-left: var(--v2-spacing-2);
}

.deleted {
  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-regular);
  font-size: var(--v2-font-size-2);
  line-height: var(--v2-line-height-body-short);
}
